<template>
  <div v-loading="loading">
    <div class="timelineTitle" v-if="list1.length">复查整改记录</div>
    <el-table :data="list1" v-if="list1.length">
      <el-table-column label="操作人" prop="operatorer" />
      <el-table-column label="操作时间" prop="operatorTime" />
      <el-table-column label="流程动作" prop="operatorType">
        <template slot-scope="scope">
          <!-- 这里是反的 -->
          <span>{{ scope.row.operatorType == '2' ? '复查' : '整改' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作结果" prop="operatorStatusName">
        <template slot-scope="scope">
          <span>{{ getOperatorStatusName(scope.row.operatorStatusName) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView1(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="timelineTitle" v-if="list2.length">延期记录</div>
    <el-table :data="list2" v-if="list2.length">
      <el-table-column label="申请人" prop="userName" />
      <el-table-column label="申请时间" prop="dateTime" />
      <el-table-column label="审批人" prop="replyUser" />
      <el-table-column label="审批时间" prop="replyTime" />
      <el-table-column label="审批结果" prop="status" >
        <template slot-scope="scope">
          <!-- 这里是反的 -->
          <span>{{ scope.row.status == '0' ? '待审批' : scope.row.status == '1' ?'不批准': '已批准'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView2(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="timelineTitle" v-if="list3.length">移交记录</div>
    <el-table :data="list3" v-if="list3.length">
      <el-table-column label="申请人" prop="operatorer" />
      <el-table-column label="移交时间" prop="operatorTime" />
      <el-table-column label="移交至" prop="removeUserName" />
      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView3(scope.row)">查看详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 整改 -->
    <ReviseDialog :visible.sync="reviseDialogVisible" v-if="reviseDialogVisible" :data="selectRow" :title="title"
      :operateType="operateType" />
    <!-- 复查 -->
    <ReviewDialog :visible.sync="reviewDialogVisible" v-if="reviewDialogVisible" :data="selectRow" :title="title"
      :operateType="operateType" />
    <!-- 移交 -->
    <OverDialog :visible.sync="overDialogVisible" v-if="overDialogVisible" :data="selectRow" :title="title"
      :operateType="operateType" />
    <!-- 延期 -->
    <DelayDialog :visible.sync="delayDialogVisible" v-if="delayDialogVisible" :data="selectRow" :title="title"
      :operateType="operateType" />
  </div>
</template>
<script>
import ReviseDialog from "../../myTask/components/reviseDialog.vue"
import ReviewDialog from "../../myTask/components/reviewDialog.vue"
import OverDialog from "../../myTask/components/overDialog.vue"
import DelayDialog from "../../myTask/components/delayDialog.vue"
import { getOperateList } from "../api"
export default {
  name: "Timeline",
  props: {
    id: {
      type: Number | String,
      default: ""
    },
  },
  components: { ReviseDialog, ReviewDialog, OverDialog, DelayDialog },
  data() {
    return {
      loading: false,
      list: [],
      list1: [],
      list2: [],
      list3: [],
      selectRow: {},
      title: "",
      reviseDialogVisible: false,
      reviewDialogVisible: false,
      overDialogVisible: false,
      delayDialogVisible: false,
      operateType: "view",
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getOperatorStatusName(value) {
      const obj = {
        '1': '已整改',
        '2': '不合格',
        '3': '合格',
        '4': '未整改',
        '5': '移交',
      }
      return obj[value]
    },
    async getList() {
      this.loading = true;
      const res = await getOperateList(this.id)
      this.list1 = res.data.listReview // 复查整改记录
      this.list2 = res.data.listCheck // 延期记录
      this.list3 = res.data.listTransfer // 移交记录
      this.loading = false;
    },
    handleView1(data) {
      this.selectRow = data;
      const operatorType = data.operatorType;
      // 这里也是反的
      if (operatorType == '1') {
        this.title = "任务整改详情"
        this.operateType = "reviseView"
        this.reviseDialogVisible = true
      } else if (operatorType == '2') {
        this.title = "任务复查详情"
        this.operateType = "reviewView"
        this.reviewDialogVisible = true
      }
    },
    handleView2(data) {
      this.selectRow = data;
      this.title = "任务延期申请详情"
      this.operateType = "view"
      this.delayDialogVisible = true
    },
    handleView3(data) {
      this.selectRow = data;
      this.title = "任务移交详情"
      this.operateType = "view"
      this.overDialogVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.timelineTitle {
  line-height: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>